<template>
    <div>
        <nav-title></nav-title>
        <div class="body_bg">
            <el-form :model="queryForm" :inline="true" class="demo-form-inline">
                <el-form-item label="所属系统">
                    <sys-select v-model="queryForm.sysCode" @change="getData()"/>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="queryForm.roleName" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item label="角色编码">
                    <el-input v-model="queryForm.roleCode" placeholder="角色编码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getData">查询</el-button>
                    <el-button type="primary" @click="handleNew">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="easyPage.records" ref="singleTable" highlight-current-row style="width: 100%" border class="">
                <el-table-column type="index" class-name="index-table"/>
                <el-table-column prop="roleCode" label="角色编码"/>
                <el-table-column prop="roleName" label="角色名称"/>
                <el-table-column fixed="right" label="操作" width="140" header-align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <common-page v-model="easyPage" @change="getData" @current-change="getData"/>
        </div>
        <role-dialog :pk="dlg.pk" v-model="dlg.dialogVisible" :disabled="dlg.disabled" @close="getData"/>
    </div>
</template>

<script>
  import RoleDialog from './RoleDialog.vue'
  import CommonPage from '../../../components/common/CommonPage.vue'
  import NavTitle from '../../../components/common/NavTitle'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {
      CommonPage,
      RoleDialog,
      NavTitle,
      SysSelect
    },
    data () {
      return {
        dlg: {
          dialogVisible: false,
          disabled: false,
          pk: '',
        },
        easyPage: {
          current: 1,
          size: 10,
        },
        queryForm: {
          roleCode: '',
          roleName: ''
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size
        })
        self.$axios
          .post('roleAction/findEasyPage', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
      })
      },
      handleNew () {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: '',
        }
      },
      handleEdit (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: row.roleId,
        }
      },
      handleView (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: true,
          pk: row.roleId,
        }
      },
      handleDelete(row) {
        let self = this;
        self.$confirm('你确定要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axios
              .post('roleAction/deleteRole', {
                  id: row.roleId
              })
              .then(function (res) {
                  if (res.data.result) {
                      self.$message({
                          message: '删除成功',
                          type: 'success'
                      });
                      self.getData()
                  } else {
                      self.$message.error(res.data.msg)
                  }
              })
      })
      },
    }
  }
</script>
